<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.min.css">
    <style>
		.magnifier {
			box-sizing: border-box;
			margin: 20px auto;
			width: 600px;
		}

		.magnifier .abbre,
		.magnifier .origin {
			float: left;
		}

		.magnifier .abbre {
			position: relative;
			box-sizing: border-box;
			width: 250px;
			height: 220px;
		}

		.magnifier .abbre img {
			width: 100%;
			height: 100%;
		}

		.magnifier .abbre .mark {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 90px;
			height: 70px;
			background: rgba(255, 0, 0, .3);
			cursor: move;
		}

		.magnifier .origin {
			display: none;
			position: relative;
			box-sizing: border-box;
			width: 350px;
			height: 320px;
			overflow: hidden;
		}

		.magnifier .origin img {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
    
	<section class="magnifier clearfix">
		<!-- 左侧缩略图 -->
		<div class="abbre">
			<img src="images/1.jpg" alt="">
			<div class="mark"></div>
		</div>
		<!-- 右侧原图(大图) -->
		<div class="origin">
			<img src="images/2.jpg" alt="">
		</div>
	</section>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let $magnifier = $('.magnifier'),
                $abbre = $magnifier.find('.abbre'),
                $mark = $magnifier.find('.mark'),
                $origin = $magnifier.find('.origin'),
                $originImg = $origin.find('img')
            // 首先按照比例计算大图的样式
            let abbreW = $abbre.width(),
                abbreH = $abbre.height(),
                markW = $mark.width(),
                markH = $mark.height(),
                originW = $origin.width(),
                originH = $origin.height(),
                originImgW = null,
                originImgH = null,
                offset = $abbre.offset() // 获取盒子距离body偏移值

            originImgW = originW / (markW/abbreW)
            originImgH = originH / (markH/abbreH)

            $originImg.css({
                width: originImgW,
                height: originImgH
            })

            // 处理鼠标在abber中的移动相关操作
            function computed(ev) {
                // 计算 mark的位置 、 大图的移动
                let markT = ev.pageY - offset.top - markH / 2,
                    markL = ev.pageX - offset.left - markW / 2,
                    originImgL = null,
                    originImgT = null
                
                let minL = 0,
                    minT = 0,
                    maxL = abbreW - markW,
                    maxT = abbreH = markH

                markL = markL < minL ? minL : (markL > maxL ? maxL : markL)
                markT = markT < minT ? minT : (markT > maxT ? maxT : markT)

                originImgL = markL / abbreW * originImgW
                originImgT = markT / abbreH * originImgH

                $mark.css({
                    left: markL,
                    top: markT
                })
                $originImg.css({
                    left: -originImgL,
                    top: -originImgT
                })
                console.log(markT, markL)
            }

            $abbre.mouseenter(function(ev) {
                $mark.css('display', 'block')
                $origin.css('display', 'block')
                computed(ev)
            }).mousemove(computed).mouseleave(function() {
                $mark.css('display', 'none')
                $origin.css('display', 'none')
            })
        })
    </script>
</body>
</html>